<template>
  <div class="table">
    <el-table
      :data="tableData()"
      style="width: 100%"
      class="center-table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="!isCheckbox" type="selection" width="55" />
      <el-table-column type="index" label="序号" width="50" />
      <ColumnData v-for="column of columns" :key="column.label" :item="column" />
      <el-table-column v-if="!operate" label="操作" width="200">
        <template #default="scope">
          <div class="operate">
            <slot :row="scope.row" name="operate" />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="example-pagination-block">
      <el-pagination
        background
        layout="prev, pager, next ,total,sizes,jumper"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>
      
<script lang='ts'>
import { defineComponent, toRefs, reactive,watch, ref } from 'vue'
import ColumnData from './column-data.vue'
export default defineComponent({
  components: {
    ColumnData,
  },
  emits: {
    modalValueChange: null,
    delectTable:null,
  },
  props: {
    tableArr: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
    },
    pagination: {
      type: Object,
    },
    operate: {
      type: Boolean,
    },
    isCheckbox: {
      type: Boolean,
    },
  },
  setup(props, { emit }) {
    //表格用到的参数
    const state = reactive({
      ...props.pagination,
    })


    const multipleSelection = ref([])

    const handleSelectionChange = (val) => {
      multipleSelection.value = val
      console.log(val)
      let ids: number[]=[]
      val.filter(
        (item, index) =>{
          console.log(item.id)
          ids.push(item.id)
          emit('delectTable', ids)
        }
      )
    }

    const handleEdit = (index: number, row) => {
      console.log(index, row)
      emit('modalValueChange', true)
    }
    const handleDelete = (index: number, row) => {
      console.log(index, row)
    }

    let dataList: any = ref(props.tableArr)
    watch(
      () => props.tableArr,
      (newVal, oldVal) => {
        changeList(newVal)
      }
    )
    const changeList = (value) => {
      dataList.value = value
    }

    //前端限制分页（tableData为当前展示页表格）
    const tableData = () => {
      // let list = JSON.parse(JSON.stringify((dataList.value)))
      if(!props.tableArr){
        return;
      }
      return props.tableArr.filter(
        (item, index) => index < state.page * state.limit && index >= state.limit * (state.page - 1)
      )
    }
    //改变页码
    const handleCurrentChange = (e) => {
      console.log(e)
      state.page = e
    }
    //改变页数限制
    const handleSizeChange = (e) => {
      console.log(e)
      state.limit = e
    }
    return {
      total: props.pagination,
      handleSelectionChange,
      handleEdit,
      handleDelete,
      tableData,
      handleCurrentChange,
      handleSizeChange,
      ...toRefs(state),
    }
  },
})
</script>
      
<style lang="scss" scoped>
.table {
  margin-top: 15px;
}
.example-pagination-block {
  margin-top: 15px;
  text-align: center;
}
/deep/.el-pagination .btn-next .el-icon {
  margin: 0 auto;
}

/deep/.el-pagination .btn-prev .el-icon {
  margin: 0 auto;
}

:deep(.center-table td),
:deep(.center-table th) {
  text-align: center !important;
}
</style>